
import { ref, reactive } from 'vue'
import { debounce } from 'lodash-es'
// 添加这些响应式状态
const isSelecting = ref(false)
const startPos = reactive({ x: -1, y: -1 })
const currentPos = reactive({ x: -1, y: -1 })
// 修改后的onDblclick和新增方法
const handleMouseDown = (x: number, y: number) => {
  isSelecting.value = true
  startPos.x = x
  startPos.y = y
  currentPos.x = x
  currentPos.y = y
}

const handleMouseEnter = (x: number, y: number) => {
  if (isSelecting.value) {
    currentPos.x = x
    currentPos.y = y
  }
}
const reset = () => {
  isSelecting.value = false
  startPos.x = -1
  startPos.y = -1
  currentPos.x = -1
  currentPos.y = -1
}

const handleMouseUp = (cb) => {

  if (Math.abs(currentPos.x - startPos.x) == 0 && Math.abs(currentPos.y - startPos.y) == 0) {
    reset()
    return
  }
  if (!isSelecting.value) return

  // 确定选区范围
  const minX = Math.min(startPos.x, currentPos.x)
  const maxX = Math.max(startPos.x, currentPos.x)
  const minY = Math.min(startPos.y, currentPos.y)
  const maxY = Math.max(startPos.y, currentPos.y)
  cb(minX, minY, maxX, maxY)


  // 重置状态
  reset()
}

export { isSelecting, startPos, currentPos, handleMouseDown, handleMouseEnter, handleMouseUp }
